<template>
	<div class="me flexDirection">
		<div class="me_banner">
			<img src="/static/background.png" alt="" class="bj" />
			<div class="b_content">
				<img :src="'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'"
					alt="" />
				<div style="align-items: flex-end; flex: 1 0 0; overflow: hidden">
					<!--    <div class="ellipsis" style="font-size: 32rpx">
            {{userInfo?.CustomName }}
          </div> -->
					<div class="ellipsis" style="font-size: 28rpx" @click.stop="isShowActionSheet = true">
						{{ currentOrg? currentOrg.FNumber + currentOrg.FName : '' }}
						<van-icon name="arrow-down" />
					</div>
					<span class="vip">{{userInfo?.DataCenterName }}</span>
				</div>
			</div>
		</div>
		<div class="me_content">
			<div class="other_list m_c_item">
				<!-- <div
          class="other_list_item"
          @click.stop="utils.navigateTo('me/index/index')"
        >
          <div class="other_list_item_left">
            <div class="other_list_item_left_icon">
              <img src="/static/my/new.png" />
            </div>
            <div class="other_list_item_left_title">我的信息</div>
          </div>
          <div class="other_list_item_right"></div>
        </div> -->
				<div class="other_list_item" @click.stop="logOut">
					<div class="other_list_item_left">
						<div class="other_list_item_left_icon">
							<img src="/static/icon/item.png" />
						</div>
						<div class="other_list_item_left_title">退出登录</div>
					</div>
					<!-- <div class="other_list_item_right"></div> -->
				</div>
			</div>
		</div>
	</div>
	<selectCom pageTitle="我的" :FieldKeys="selectComFieldKeys" :isAddFUseOrgId="false" type="组织机构"
		:show="isShowActionSheet" @close="isShowActionSheet = false" @submit="selectData"></selectCom>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue';
	import selectCom from '@/components/selectCom.vue';
	import utils from '@/utils/index';
	import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	import { Utils } from '@/utils/utils';
	import { changeOrg } from '@/api/user';
	const { getters, dispatch, commit } = useStore();
	/**
	 * 获取用户信息
	 */
	const userInfo = computed(() => {

		return getters['user/userInfo'];
	});
	/**
	 * 获取当前组织信息
	 */
	const currentOrg = ref( Utils.getStorage("currentOrganization"))
	
	/**
	 * 退出登录
	 */
	const logOut = async () => {

		Utils.showModal('确定退出登录吗？', () => {
			uni.clearStorageSync();
			utils.reLaunch('home/index');
		});
	};
	const isShowActionSheet = ref(false)
	const selectComFieldKeys = ref('FNumber,FName,FForbidStatus,FDocumentStatus')
	/**
	 * 切换组织
	 */
	const selectData = async (v : any) => {
		const newOrg = await Utils.selectData(v)
		if(newOrg)currentOrg.value = newOrg
		// if (v && v.FName) {
		// 	// 调用切换组织api
		// 	const res:any =  await changeOrg({
		// 		data:JSON.stringify({
		// 		OrgNumber:v.FNumber
		// 		})
		// 	})
		// 	const isOk = Utils.isReqOk(res)
		// 	console.log(isOk);
		// 	const newOrg = {
		// 		FNumber: v.FNumber,
		// 		FName: v.FName
		// 	}
		// 	Utils.setStorage("currentOrganization", newOrg )
		// 	currentOrg.value = newOrg
		// }
		// isShowActionSheet.value = false
	}
	


	/**
	 * 下拉刷新
	 */
	onPullDownRefresh(async () => {
		uni.stopPullDownRefresh();
	});

	onLoad(() => {
		//  uni.getMenuButtonBoundingClientRect();
	});
</script>

<style lang="less" scoped>
	.me {
		height: 100vh;

		.vip {
			padding: 2rpx 22rpx;
			margin: 0;
			border-radius: 20px;
			transform: translateY(-2px);
			font-weight: 500;
			font-size: 22rpx;
			color: #663d00;
			background: linear-gradient(90deg, #ffdf89 0%, #f2ca5b 100%);
			white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
			// cursor: pointer;
		}

		.me_banner {
			position: relative;
			height: 32vh;

			.bj {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: -1;
			}

			.b_content {
				display: flex;
				align-items: center;
				height: 100%;
				padding: 0 35rpx;
				margin-top: 40rpx;

				image {
					width: 130rpx;
					height: 130rpx;
					margin-right: 32rpx;
					border-radius: 50%;
				}

				view {
					font-weight: 500;
					font-size: 42rpx;
					color: #000000;
				}
			}
		}

		.me_content {
			flex: 1;
			position: relative;
			padding: 20rpx 24rpx;
			margin-top: -80rpx;
			border-radius: 20rpx 20rpx 0 0;
			background: #f6f6f6;
			z-index: 9;

			.m_c_item {
				padding: 24rpx;
				background: #ffffff;
				border-radius: 20rpx;
			}

			.me_order {
				margin-bottom: 20rpx;

				.order_head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 21rpx;
				}

				.order_content {
					display: flex;
					justify-content: space-between;

					.order_content_item {
						position: relative;
						width: 20%;

						.order_content_item_icon {
							display: flex;
							justify-content: center;
							margin-bottom: 7rpx;

							image {
								width: 50rpx;
								height: 50rpx;
							}
						}

						.order_content_item_name {
							color: #000000;
							font-size: 26rpx;
							text-align: center;
						}

						.tipNum {
							position: absolute;
							top: 0;
							right: 0;
							transform: translate(-60%, -35%);
							min-width: 30rpx;
							border-radius: 20rpx;
							background: #eb3a35;
							font-size: 20rpx;
							color: #fff;
						}
					}
				}
			}

			.history_order {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 16rpx 0;
				padding: 40rpx 24rpx;

				.order_head_left {
					display: flex;

					.order_head_left_icon {
						display: flex;
						align-items: center;
						margin-right: 16rpx;

						image {
							width: 44rpx;
							height: 44rpx;
						}
					}

					.order_head_left_title {
						display: flex;
						align-items: center;
					}
				}
			}

			.me_order,
			.history_order {
				.order_head_left {
					font-weight: 700;
					font-size: 34rpx;
				}

				.order_head_right {
					color: #999999;
					font-size: 24rpx;
				}
			}

			.other_list {
				padding: 0 24rpx;

				.other_list_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 40rpx 0;
					border-bottom: 1rpx solid #eeeeee;

					.other_list_item_left {
						display: flex;

						.other_list_item_left_icon {
							display: flex;
							align-items: center;
							margin-right: 16rpx;

							image {
								width: 44rpx;
								height: 44rpx;
							}
						}

						.other_list_item_left_title {
							display: flex;
							align-items: center;
							font-size: 34rpx;
							font-weight: 700;
						}
					}

					&:last-child {
						border: none;
					}
				}
			}
		}

		.module {
			height: 330rpx;
			margin: 28rpx 0 44rpx;

			>view {
				height: 100%;
				border-radius: 34rpx;
				overflow: hidden;
			}

			.m_title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
			}

			.m_tip {
				margin: 6rpx 0 16rpx;
				font-size: 22rpx;
				color: #999999;
			}

			.m_btn {
				position: relative;
				width: 140rpx;
				height: 52rpx;
				border-radius: 80rpx;
				font-size: 26rpx;
				font-weight: 600;
				color: #fff;
			}

			image {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			.m_left {
				position: relative;
				width: 278rpx;
				padding: 40rpx 0 0 30rpx;
				margin-right: 12rpx;
			}

			.m_right {
				flex: 1;
				display: flex;
				flex-direction: column;
				height: 100%;

				.m_r_top {
					position: relative;
					height: 160rpx;
					padding: 40rpx 0 0 26rpx;

					border-radius: 33rpx;
					border: 1rpx solid #e9b4f9;
					background: #fbeeff;

					image {
						width: 204rpx;
						height: 142rpx;
						z-index: 1;
					}
				}

				.m_r_bottom {
					flex: 1;
					margin-top: 8rpx;

					>view {
						position: relative;
						flex: 1;
						display: flex;
						justify-content: center;
						height: 100%;
						padding-top: 24rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.ad {
			position: relative;
			margin-top: 40rpx;

			.ad_btn {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 120rpx;
				height: 120rpx;
			}
		}

		.qr {
			flex-direction: column;
			margin-top: 40rpx;
			border-radius: 10rpx 10rpx 0px 0px;
			background: linear-gradient(180deg, #eff3fc 0%, #ffffff 100%);

			.qr_title {
				padding: 24rpx 0;
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}

			.qr_content {
				justify-content: space-between;
				width: 100%;

				.qr_c_item {
					flex-direction: column;
					width: 216rpx;
					height: 270rpx;
					background: linear-gradient(180deg,
							#ffffff 0%,
							rgba(255, 255, 255, 0.58) 100%,
							#ffffff 100%);
					border-radius: 17rpx;

					image {
						width: 140rpx;
						height: 140rpx;
					}

					view {
						margin-top: 15rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>